<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Autobahn: Decimal Calculator Demo</title>
      <style>
         body {
            font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif;
         }

         #calcdisplay {
            color: #333;
            background-color: #fff;
            padding: 0.2em;
            min-height: 3em;
            text-align: right;
         }

         #calc {
            margin: 60px;
            background-color: #028ec9;
            padding: 1em;
            border-radius: 0.5em;
         }

         #calc td {
            height: 100%;
         }

         #calc button {
            width: 100%;
            height: 100%;
            min-height: 3em;
            min-width: 3em;
         }
      </style>

      <script src="http://autobahn.s3.amazonaws.com/js/autobahn.min.js"></script>
      <script src="http://code.jquery.com/jquery.min.js"></script>

      <script>
         var sess = null;
         var clearFirst = false;

         $(document).ready(function()
         {
            // connect to WAMP server
            ab.connect("ws://localhost:9000",

               // WAMP session was established
               function (session) {

                  sess = session;
                  console.log("Connected!");

                  sess.prefix("calculator", "http://example.com/simple/calculator#");
               },

               // WAMP session is gone
               function (code, reason) {

                  sess = null;
                  alert(reason);
               }
            );
         });

         function key_digit(d) {

            var s = $('#calcdisplay').html();

            if (clearFirst) {
               if (d == ".") {
                  s = "0.";
               } else {
                  s = d;
               }
               clearFirst = false;
            } else {
               if (d == ".") {
                  if (s.indexOf(".") == -1) {
                     s += ".";
                  }
               }
               else {
                  if (s == "0") {
                     s = d;
                  }
                  else {
                     s += d;
                  }
               }
            }
            $('#calcdisplay').html(s);
         }

         function key_op(op) {

            arg = {op: op};
            if (op != "C") {
               arg.num = $('#calcdisplay').html();
            }

            sess.call("calculator:calc", arg).then(function (res) { $('#calcdisplay').html(res); },
                                                   function (res) { alert("Error (" + res + ")"); });

            clearFirst = true;
         }
     </script>
   </head>
   <body>
      <h1>Autobahn: Decimal Calculator Demo</h1>
      <table id="calc">
         <tr>
            <td id="calcdisplay" colspan="5">0</td>
         </tr>
         <tr><td style="height: 0.5em;" colspan="5"></td></tr>
         <tr>
            <td><button onclick='key_digit("7");'>7</button></td>
            <td><button onclick='key_digit("8");'>8</button></td>
            <td><button onclick='key_digit("9");'>9</button></td>
            <td><button onclick='key_op("/");'>/</button></td>
            <td rowspan="2"><button onclick='key_op("C");'>C</button></td>
         </tr>
         <tr>
            <td><button onclick='key_digit("4");'>4</button></td>
            <td><button onclick='key_digit("5");'>5</button></td>
            <td><button onclick='key_digit("6");'>6</button></td>
            <td><button onclick='key_op("*");'>*</button></td>
         </tr>
         <tr>
            <td><button onclick='key_digit("1");'>1</button></td>
            <td><button onclick='key_digit("2");'>2</button></td>
            <td><button onclick='key_digit("3");'>3</button></td>
            <td><button onclick='key_op("-");'>-</button></td>
            <td rowspan="2"><button onclick='key_op("=");'>=</button></td>
         </tr>
         <tr>
            <td colspan="2"><button onclick='key_digit("0");'>0</button></td>
            <td><button onclick='key_digit(".");'>.</button></td>
            <td><button onclick='key_op("+");'>+</button></td>
         </tr>
      </table>
   </body>
 </html>
